import * as React from 'react';
import {ComponentDecorator, connect} from 'react-redux';

import WidgetPaneItem from './WidgetPaneItem';
import widgets from './widgets';
import {IWidget} from './IWidget';

import './WidgetPane.css';
import {AppState} from '../../store/index';

interface WidgetPaneMergedProps {
  widgets?: IWidget[];
}

type WidgetPaneProps = WidgetPaneMergedProps;

function mapStateToProps(state: AppState) {
  return {
    widgets: state.customWidgetsState
  };
}

class WidgetPane extends React.Component<WidgetPaneProps, undefined> {

  render() {
    return (
      <div className="Widget">
        <div className="Widget-title">组件</div>
        <div className="Widget-items">
          {widgets.map(widget => this.renderWidget(widget))}
          {(this.props.widgets || []).map(widget => this.renderWidget(widget))}
        </div>
      </div>
    );
  }

  private renderWidget(widget: IWidget) {
    return (
      <WidgetPaneItem key={widget.name} widget={widget}/>
    );
  }
}

type WidgetPaneDecorator = ComponentDecorator<WidgetPaneMergedProps, undefined>;
const componentDecorator: WidgetPaneDecorator = connect(mapStateToProps);
export default componentDecorator(WidgetPane);
